import React from 'react';
import { useGame } from '../hooks/useGame';
import { ModeSelection } from './ModeSelection';
import { Board } from './Board';
import { GameControlPanel } from './GameControlPanel';
import { GameResultModal } from './GameResultModal';

export const GameInterface: React.FC = () => {
  const {
    gameState,
    isAIThinking,
    startNewGame,
    makeMove,
    resetGame,
    backToModeSelection,
  } = useGame();

  // 模式选择界面
  if (gameState.gameStatus === 'selecting' || !gameState.gameMode) {
    return <ModeSelection onModeSelect={startNewGame} />;
  }

  // 游戏界面
  return (
    <div className="min-h-screen bg-neutral-50">
      {/* 顶部导航栏 */}
      <header className="bg-white border-b border-neutral-200 px-4 py-4 md:px-8">
        <div className="max-w-7xl mx-auto flex items-center justify-between">
          <h1 className="text-xl md:text-2xl font-bold text-neutral-900">
            五子棋对战
          </h1>
          <div className="flex items-center space-x-4">
            <span className="text-small text-neutral-500 hidden md:block">
              {gameState.gameMode === 'ai' ? '人机对战' : '双人对战'}
            </span>
          </div>
        </div>
      </header>

      {/* 主游戏区域 */}
      <main className="max-w-7xl mx-auto px-4 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
          {/* 棋盘区域 */}
          <div className="lg:col-span-3">
            <Board
              board={gameState.board}
              onCellClick={makeMove}
              lastMove={gameState.lastMove}
              winningLine={gameState.winningLine}
              disabled={gameState.gameStatus !== 'playing'}
              isAIThinking={isAIThinking}
            />
          </div>

          {/* 控制面板 */}
          <div className="lg:col-span-1">
            <div className="sticky top-8">
              <GameControlPanel
                currentPlayer={gameState.currentPlayer}
                moveCount={gameState.moveCount}
                gameMode={gameState.gameMode}
                onReset={resetGame}
                onBackToMode={backToModeSelection}
                isAIThinking={isAIThinking}
              />
            </div>
          </div>
        </div>
      </main>

      {/* 移动端控制面板 */}
      <div className="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-neutral-200 p-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <div className={`
              w-8 h-8 rounded-full flex items-center justify-center
              ${gameState.currentPlayer === 'black' ? 'bg-neutral-900' : 'bg-white border-2 border-neutral-200'}
            `}>
              <div className="w-4 h-4 bg-current rounded-full" 
                   style={{ 
                     backgroundColor: gameState.currentPlayer === 'black' ? 'white' : 'black' 
                   }} 
              />
            </div>
            <div>
              <div className="text-small font-medium text-neutral-900">
                {gameState.currentPlayer === 'black' ? '黑棋' : '白棋'}回合
              </div>
              <div className="text-xs text-neutral-500">
                第 {gameState.moveCount} 步
              </div>
            </div>
          </div>
          
          <div className="flex space-x-2">
            <button
              onClick={resetGame}
              className="px-4 py-2 bg-primary-500 text-white text-small rounded-md font-medium"
              disabled={isAIThinking}
            >
              重新开始
            </button>
            <button
              onClick={backToModeSelection}
              className="px-4 py-2 bg-neutral-200 text-neutral-700 text-small rounded-md font-medium"
              disabled={isAIThinking}
            >
              返回
            </button>
          </div>
        </div>
      </div>

      {/* 游戏结果模态框 */}
      <GameResultModal
        isOpen={gameState.gameStatus === 'finished'}
        winner={gameState.winner}
        gameMode={gameState.gameMode}
        moveCount={gameState.moveCount}
        onRestart={resetGame}
        onBackToMode={backToModeSelection}
      />

      {/* 移动端底部间距 */}
      <div className="lg:hidden h-20" />
    </div>
  );
};